﻿@{
    ViewBag.Title = "ZeusAjaxPost";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .waitArea {
      width: 100px;
      height: 100px;
      border: 1px solid #ffffff;
      position: relative;
      float: left;
    }
    .waitArea2 {
      width: 200px;
      height: 300px;
      border: 1px solid #ffffff;
      position: relative;
      float: left;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div id="waitArea" class="waitArea"></div>
<div id="waitArea2" class="waitArea2"></div>

<br />
<br />

<input type="button" id="btnPost" value="send post" />

<script type="text/javascript">
    $(document).ready(function () {
        ZEUS.DEBUG.log("Start Ajax Posting ... ");
        $("#waitArea").loadAjaxWidget();
        $("#waitArea2").loadAjaxWidget();
        $.ZEUS.ajax.send({
            type: 'POST',
            traditional: true,
            data: null,
            url: '/AJax/AjaxPostTest',
            dataType: 'json',
            cache: false,
            global: true,
            success: function (data) {
                ZEUS.DEBUG.log(data.msg);
            },
            beforeSend: function () {
            },
            complete: function () {
                ZEUS.DEBUG.log("Ajax Post Completed!");
                $("#waitArea").loadAjaxWidget('destroy');
                $("#waitArea2").loadAjaxWidget('destroy');
            }
        });
    });
</script>
